<template>
  <div class="overview-container">
    <div class="container !pr-0">
      <div class="row">
        <my-card>
          <template #header>
            <SvgIcon icon="yonghu1" color="#3dbd7d" size="24px"></SvgIcon>
            <div class="ml-[5px]">用户信息</div>
          </template>

          <template #content>
            <div class="flex h-full items-center">
              <div
                class="left-panel h-[80%] flex flex-col flex-1 justify-center items-center bg-primaryColor bg-opacity-3"
              >
                <span class="text-[20px] text-primaryColor">
                  {{ overview.userCount }}
                </span>
                <span class="text-gray-400 mt-1">总用户数</span>
              </div>
              <div class="flex flex-col flex-1 pl-[12px]">
                <div class="flex items-center">
                  <SvgIcon icon="yuandian-copy" color="#3dbd7d"> </SvgIcon>
                  激活账号：{{ overview.activeUser }}
                </div>
                <div class="flex items-center mt-[12px]">
                  <SvgIcon icon="yuandian-copy" color="#bfbfbf"> </SvgIcon
                  >禁用账号：{{ overview.inActiveUser }}
                </div>
              </div>
            </div>
          </template>

          <template #footer>
            <div class="login-today flex-2">
              今日登录 {{ overview.loginUser }}
            </div>
            <div class="online flex-2">当前在线 1</div>
            <div class="add flex-1 flex justify-end">
              <n-popover
                trigger="hover"
                placement="right-start"
                :raw="true"
                :show-arrow="false"
              >
                <template #trigger>
                  <div
                    v-permission="[PERMISSIONS.USER_EDIT]"
                    @click="handleToAddUser"
                    class="bg-gray-200 w-[24px] h-[24px] flex justify-center items-center cursor-pointer hover:bg-blue-200"
                  >
                    <SvgIcon
                      icon="zengjiatianjiajiahao"
                      color="#1890ff"
                    ></SvgIcon>
                  </div>
                </template>
                <div class="bg-yellow-100 p-2 text-[13px]">新增用户</div>
              </n-popover>
            </div>
          </template>
        </my-card>
        <my-card>
          <template #header>
            <div class="round !bg-yellow-400">
              <SvgIcon icon="copy" color="#fff" size="18px"></SvgIcon>
            </div>
            <div class="ml-[5px]">文件信息</div>
          </template>

          <template #content>
            <div class="flex h-full items-center">
              <div
                class="left-panel h-[80%] flex flex-col flex-1 justify-center items-center bg-primaryColor bg-opacity-3"
              >
                <span class="text-[20px] text-primaryColor">{{
                  convertFromBytes('' + overview.sourceSize)
                }}</span>
                <span class="text-gray-400 mt-1">空间使用</span>
              </div>
            </div>
          </template>
          <template #footer>
            <div class="login-today flex-2">
              文件个数 {{ overview.sourceCount }}
            </div>
            <div class="online flex-2">
              今日新增 {{ overview.sourceNewCount }}
            </div>
            <div class="flex-1"></div>
          </template>
        </my-card>
        <my-card>
          <template #header>
            <div class="round !bg-purple-500">
              <SvgIcon
                icon="statistics-filled"
                color="#fff"
                size="18px"
              ></SvgIcon>
            </div>
            <div class="ml-[5px]">访问信息(今日)</div>
          </template>

          <template #content>
            <n-space vertical class="pt-[6px]">
              <div class="flex text-[10px] items-center">
                <div>文件上传：</div>
                <n-tooltip trigger="hover">
                  <template #trigger>
                    <n-progress
                      color="#4cca72"
                      :border-radius="0"
                      class="flex-1 cursor-pointer"
                      type="line"
                      :percentage="converPercent(overview.uploadCnt)"
                      :show-indicator="false"
                    />
                  </template>
                  文件上传：{{ overview.uploadCnt }}
                </n-tooltip>
              </div>
              <div class="flex text-[10px] items-center">
                <div>文件下载：</div>
                <n-tooltip trigger="hover">
                  <template #trigger>
                    <n-progress
                      :border-radius="0"
                      color="#f9d236"
                      class="flex-1"
                      type="line"
                      :percentage="converPercent(overview.downloadCnt)"
                      :show-indicator="false"
                    />
                  </template>
                  文件下载：{{ overview.downloadCnt }}
                </n-tooltip>
              </div>
              <div class="flex text-[10px] items-center">
                <div>文件编辑：</div>
                <n-tooltip trigger="hover">
                  <template #trigger>
                    <n-progress
                      :border-radius="0"
                      class="flex-1 cursor-pointer"
                      type="line"
                      :percentage="converPercent(overview.editCnt)"
                      :show-indicator="false"
                    />
                  </template>
                  文件编辑：{{ overview.editCnt }}
                </n-tooltip>
              </div>
              <div class="flex text-[10px] items-center">
                <div>文件删除：</div>
                <n-tooltip trigger="hover">
                  <template #trigger>
                    <n-progress
                      color="#d03050"
                      :border-radius="0"
                      class="flex-1 cursor-pointer"
                      type="line"
                      :percentage="converPercent(overview.delCnt)"
                      :show-indicator="false"
                    />
                  </template>
                  文件删除：{{ overview.delCnt }}
                </n-tooltip>
              </div>
            </n-space>
          </template>
          <template #footer>
            <div class="login-today flex-2">
              请求次数 {{ overview.reqCount }}
            </div>
            <div class="online flex-2">访问用户 {{ overview.reqUser }}</div>
            <div class="add flex-1 flex justify-end">
              <n-popover
                trigger="hover"
                placement="right-start"
                :raw="true"
                :show-arrow="false"
              >
                <template #trigger>
                  <div
                    v-permission="[PERMISSIONS.LOG_MANAGE]"
                    @click="handleToOptionLog"
                    class="bg-gray-200 w-[24px] h-[24px] flex justify-center items-center cursor-pointer hover:bg-blue-200"
                  >
                    <SvgIcon icon="gengduo1" color="#1890ff"></SvgIcon>
                  </div>
                </template>
                <div class="bg-yellow-100 p-2 text-[13px]">详情</div>
              </n-popover>
            </div>
          </template>
        </my-card>
      </div>
    </div>

    <div class="spaceInfo bg-lightColor px-[12px] rounded-md">
      <n-tabs type="line" animated>
        <n-tab-pane name="userSpace" tab="用户空间">
          <user-space></user-space>
        </n-tab-pane>

        <n-tab-pane name="depSpace" tab="部门空间">
          <dep-space></dep-space>
        </n-tab-pane>
      </n-tabs>
    </div>
    <div class="spaceCharts bg-lightColor px-[12px] rounded-md mt-[12px]">
      <n-tabs type="line" animated>
        <n-tab-pane name="userSpace" tab="用户数据">
          <UserData></UserData>
        </n-tab-pane>

        <n-tab-pane name="depSpace" tab="空间使用"> </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getOverviewInfo } from '@/api/overview'
import type { OverViewRes } from '@/types/overview'
import { convertFromBytes } from '@/utils'
import { PERMISSIONS } from '@/constants/permission'
import MyCard from './components/MyCard.vue'
import UserSpace from './components/UserSpace.vue'
import UserData from './components/UserData.vue'
import DepSpace from './components/DepSpace.vue'

const router = useRouter()

const overview = reactive<OverViewRes>({
  userCount: 0,
  activeUser: 0,
  inActiveUser: 0,
  reqCount: 0,
  reqUser: 0,
  loginUser: 0,
  sourceCount: 0,
  sourceNewCount: 0,
  sourceSize: 0,
  uploadCnt: 0,
  downloadCnt: 0,
  delCnt: 0,
  editCnt: 0
})

const maxSourceActionCnt = computed(() => {
  return Math.max(
    overview.uploadCnt,
    overview.downloadCnt,
    overview.delCnt,
    overview.editCnt
  )
})

const converPercent = (cnt: number) => {
  return Math.floor((cnt / maxSourceActionCnt.value) * 100)
}

const loadSystemOverview = () => {
  getOverviewInfo()
    .then((res) => {
      const {
        userCount,
        activeUser,
        inActiveUser,
        reqCount,
        reqUser,
        loginUser,
        sourceCount,
        sourceNewCount,
        sourceSize,
        delCnt,
        uploadCnt,
        downloadCnt,
        editCnt
      } = res.data
      overview.userCount = userCount
      overview.inActiveUser = inActiveUser
      overview.activeUser = activeUser
      overview.reqCount = reqCount
      overview.reqUser = reqUser
      overview.loginUser = loginUser
      overview.sourceCount = sourceCount
      overview.sourceNewCount = sourceNewCount
      overview.sourceSize = sourceSize
      overview.delCnt = delCnt
      overview.downloadCnt = downloadCnt
      overview.uploadCnt = uploadCnt
      overview.editCnt = editCnt
    })
    .catch(console.error)
}

// 去添加用户
const handleToAddUser = () => {
  router.push({
    name: 'user'
  })
}

// 去往操作日志
const handleToOptionLog = () => {
  router.push({
    name: 'log'
  })
}

onMounted(() => {
  loadSystemOverview()
})
</script>

<style scoped lang="scss">
.overview-container {
  width: 100%;
  // @media (min-width: 1200px) {
  .container {
    max-width: 100%;
  }
  // }

  :deep(.n-data-table-tbody .n-data-table-tr:hover .n-data-table-td) {
    background-color: #e5f3ff;
  }
}

.round {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-2 {
  flex: 2;
}
</style>
